<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>流程列表 - 物料分析系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="../css/styles.css">
</head>
<body class="bg-gray-100 p-6">
    <div class="max-w-7xl mx-auto">
        <!-- 页面标题 -->
        <div class="flex justify-between items-center mb-6">
            <h1 class="text-2xl font-bold text-gray-800">流程列表</h1>
            <button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700" onclick="window.location.href='process-create.html'">
                <i class="fas fa-plus mr-2"></i>新增流程
            </button>
        </div>

        <!-- 查询条件 -->
        <div class="bg-white rounded-lg shadow-md p-6 mb-6">
            <h3 class="text-lg font-semibold text-gray-800 mb-4">查询条件</h3>
            <form id="searchForm" class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div class="form-group">
                    <label class="block text-sm font-medium text-gray-700 mb-1">流程编号</label>
                    <input type="text" class="form-input w-full px-3 py-2 border rounded-lg" name="processCode">
                </div>
                <div class="form-group">
                    <label class="block text-sm font-medium text-gray-700 mb-1">流程标题</label>
                    <input type="text" class="form-input w-full px-3 py-2 border rounded-lg" name="title">
                </div>
                <div class="form-group">
                    <label class="block text-sm font-medium text-gray-700 mb-1">业务类型</label>
                    <select class="form-input w-full px-3 py-2 border rounded-lg" name="businessType">
                        <option value="">全部</option>
                        <option value="底价">底价</option>
                        <option value="单一资源">单一资源</option>
                        <option value="内部供应商议价">内部供应商议价</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="block text-sm font-medium text-gray-700 mb-1">项目编号</label>
                    <input type="text" class="form-input w-full px-3 py-2 border rounded-lg" name="projectCode">
                </div>
                <div class="form-group">
                    <label class="block text-sm font-medium text-gray-700 mb-1">项目名称</label>
                    <input type="text" class="form-input w-full px-3 py-2 border rounded-lg" name="projectName">
                </div>
                <div class="form-group">
                    <label class="block text-sm font-medium text-gray-700 mb-1">预计需求时间</label>
                    <input type="date" class="form-input w-full px-3 py-2 border rounded-lg" name="expectedDemandTime">
                </div>
                <div class="form-group">
                    <label class="block text-sm font-medium text-gray-700 mb-1">申请人</label>
                    <div class="flex">
                        <input type="text" class="form-input w-full px-3 py-2 border rounded-lg" name="applicant" readonly>
                        <button class="ml-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700" onclick="showUserSelectModal()">
                            <i class="fas fa-search"></i>
                        </button>
                    </div>
                </div>
                <div class="form-group">
                    <label class="block text-sm font-medium text-gray-700 mb-1">申请日期</label>
                    <div class="flex space-x-2">
                        <input type="date" class="form-input w-full px-3 py-2 border rounded-lg" name="startDate">
                        <span class="flex items-center">至</span>
                        <input type="date" class="form-input w-full px-3 py-2 border rounded-lg" name="endDate">
                    </div>
                </div>
                <div class="form-group">
                    <label class="block text-sm font-medium text-gray-700 mb-1">状态</label>
                    <select class="form-input w-full px-3 py-2 border rounded-lg" name="status">
                        <option value="">全部</option>
                        <option value="草稿">草稿</option>
                        <option value="处理中">处理中</option>
                        <option value="待核价审核">待核价审核</option>
                        <option value="待财务归档">待财务归档</option>
                        <option value="已关闭">已关闭</option>
                        <option value="退回修改中">退回修改中</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="block text-sm font-medium text-gray-700 mb-1">决标方式</label>
                    <select class="form-input w-full px-3 py-2 border rounded-lg" name="bidType">
                        <option value="">全部</option>
                        <option value="分项决标">分项决标</option>
                        <option value="总价决标">总价决标</option>
                    </select>
                </div>
                <div class="form-group md:col-span-3 flex justify-end space-x-4">
                    <button type="button" class="px-4 py-2 border rounded-lg hover:bg-gray-100" onclick="resetSearch()">
                        <i class="fas fa-redo mr-2"></i>重置
                    </button>
                    <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
                        <i class="fas fa-search mr-2"></i>查询
                    </button>
                </div>
            </form>
        </div>

        <!-- 流程列表 -->
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            <input type="checkbox" class="rounded text-blue-600" id="selectAllProcesses">
                        </th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer" onclick="sortTable('processCode')">
                            流程编号 <i class="fas fa-sort"></i>
                        </th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer" onclick="sortTable('processTitle')">
                            流程标题 <i class="fas fa-sort"></i>
                        </th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer" onclick="sortTable('businessType')">
                            业务类型 <i class="fas fa-sort"></i>
                        </th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer" onclick="sortTable('projectCode')">
                            项目编号 <i class="fas fa-sort"></i>
                        </th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer" onclick="sortTable('projectName')">
                            项目名称 <i class="fas fa-sort"></i>
                        </th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer" onclick="sortTable('expectedTime')">
                            预计需求时间 <i class="fas fa-sort"></i>
                        </th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer" onclick="sortTable('applicant')">
                            申请人 <i class="fas fa-sort"></i>
                        </th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer" onclick="sortTable('applyDate')">
                            申请日期 <i class="fas fa-sort"></i>
                        </th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer" onclick="sortTable('status')">
                            状态 <i class="fas fa-sort"></i>
                        </th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer" onclick="sortTable('bidType')">
                            决标方式 <i class="fas fa-sort"></i>
                        </th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer" onclick="sortTable('materialCount')">
                            物料数量 <i class="fas fa-sort"></i>
                        </th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer" onclick="sortTable('remark')">
                            备注 <i class="fas fa-sort"></i>
                        </th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200" id="processTableBody">
                    <!-- 手动创建的流程 -->
                    <tr class="hover:bg-gray-50">
                        <td class="px-6 py-4 whitespace-nowrap">
                            <input type="checkbox" class="rounded text-blue-600">
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                            <a href="process-detail.html?code=PR-2024-001" class="text-blue-600 hover:text-blue-800">PR-2024-001</a>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">新能源电池组物料分析</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">手动创建</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">张三</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">研发部</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">2024-03-15</td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="status-badge processing">处理中</span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                            <div class="flex space-x-2">
                                <button class="text-blue-600 hover:text-blue-800" onclick="viewProcess('PR-2024-001')">
                                    <i class="fas fa-eye"></i>
                                </button>
                                <button class="text-green-600 hover:text-green-800" onclick="approveProcess('PR-2024-001')">
                                    <i class="fas fa-check"></i>
                                </button>
                                <button class="text-yellow-600 hover:text-yellow-800" onclick="rejectProcess('PR-2024-001')">
                                    <i class="fas fa-times"></i>
                                </button>
                                <button class="text-red-600 hover:text-red-800" onclick="deleteProcess('PR-2024-001')">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                    <!-- OA流程的商用车新产品开发申请单 -->
                    <tr class="hover:bg-gray-50">
                        <td class="px-6 py-4 whitespace-nowrap">
                            <input type="checkbox" class="rounded text-blue-600">
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                            <a href="process-detail.html?code=PR-2024-002" class="text-blue-600 hover:text-blue-800">PR-2024-002</a>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">商用车新能源动力系统开发</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">OA流程</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">李四</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">商用车事业部</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">2024-03-16</td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="status-badge pending-review">待核价审核</span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                            <div class="flex space-x-2">
                                <button class="text-blue-600 hover:text-blue-800" onclick="viewProcess('PR-2024-002')">
                                    <i class="fas fa-eye"></i>
                                </button>
                                <button class="text-green-600 hover:text-green-800" onclick="approveProcess('PR-2024-002')">
                                    <i class="fas fa-check"></i>
                                </button>
                                <button class="text-yellow-600 hover:text-yellow-800" onclick="rejectProcess('PR-2024-002')">
                                    <i class="fas fa-times"></i>
                                </button>
                                <button class="text-red-600 hover:text-red-800" onclick="deleteProcess('PR-2024-002')">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- 分页 -->
        <div class="flex justify-between items-center mt-4">
            <div class="text-sm text-gray-600">
                显示第 <span id="startIndex">0</span> 到 <span id="endIndex">0</span> 条，共 <span id="totalCount">0</span> 条记录
            </div>
            <div class="flex space-x-2">
                <button class="px-3 py-1 border rounded-lg hover:bg-gray-100" onclick="previousPage()" id="prevPage">
                    <i class="fas fa-chevron-left"></i>
                </button>
                <div class="flex space-x-1" id="pageNumbers">
                    <!-- 页码将通过JavaScript动态添加 -->
                </div>
                <button class="px-3 py-1 border rounded-lg hover:bg-gray-100" onclick="nextPage()" id="nextPage">
                    <i class="fas fa-chevron-right"></i>
                </button>
            </div>
        </div>
    </div>

    <!-- 新增流程模态框 -->
    <div id="addProcessModal" class="modal">
        <div class="modal-content">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-semibold text-gray-800">新增流程</h3>
                <button class="text-gray-500 hover:text-gray-700" onclick="closeAddProcessModal()">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <form id="addProcessForm" class="space-y-4">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="form-group">
                        <label class="block text-sm font-medium text-gray-700 mb-1 required">流程标题</label>
                        <input type="text" class="form-input w-full px-3 py-2 border rounded-lg" name="processTitle" required>
                    </div>
                    <div class="form-group">
                        <label class="block text-sm font-medium text-gray-700 mb-1 required">业务类型</label>
                        <select class="form-input w-full px-3 py-2 border rounded-lg" name="businessType" required>
                            <option value="">请选择</option>
                            <option value="底价">底价</option>
                            <option value="单一资源">单一资源</option>
                            <option value="内部供应商议价">内部供应商议价</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="block text-sm font-medium text-gray-700 mb-1">项目编号</label>
                        <input type="text" class="form-input w-full px-3 py-2 border rounded-lg" name="projectCode">
                    </div>
                    <div class="form-group">
                        <label class="block text-sm font-medium text-gray-700 mb-1">项目名称</label>
                        <input type="text" class="form-input w-full px-3 py-2 border rounded-lg" name="projectName">
                    </div>
                    <div class="form-group">
                        <label class="block text-sm font-medium text-gray-700 mb-1">预计需求时间</label>
                        <input type="date" class="form-input w-full px-3 py-2 border rounded-lg" name="expectedTime">
                    </div>
                    <div class="form-group">
                        <label class="block text-sm font-medium text-gray-700 mb-1 required">决标方式</label>
                        <select class="form-input w-full px-3 py-2 border rounded-lg" name="bidType" required>
                            <option value="">请选择</option>
                            <option value="分项决标">分项决标</option>
                            <option value="总价决标">总价决标</option>
                        </select>
                    </div>
                    <div class="form-group md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-1">补充说明</label>
                        <textarea class="form-input w-full px-3 py-2 border rounded-lg" rows="3" name="remark"></textarea>
                    </div>
                </div>
                <div class="flex justify-end space-x-4">
                    <button type="button" class="px-4 py-2 border rounded-lg hover:bg-gray-100" onclick="closeAddProcessModal()">取消</button>
                    <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">保存</button>
                </div>
            </form>
        </div>
    </div>

    <!-- 用户选择模态框 -->
    <div id="userSelectModal" class="modal">
        <div class="modal-content">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-semibold text-gray-800">选择用户</h3>
                <button class="text-gray-500 hover:text-gray-700" onclick="closeUserSelectModal()">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="space-y-4">
                <div class="form-group">
                    <div class="flex space-x-2">
                        <input type="text" class="form-input w-full px-3 py-2 border rounded-lg" id="userSearch" placeholder="输入工号或姓名">
                        <button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700" onclick="searchUsers()">
                            <i class="fas fa-search"></i>
                        </button>
                    </div>
                </div>
                <div id="userSearchResults" class="max-h-60 overflow-y-auto border rounded-lg">
                    <!-- 搜索结果将通过JavaScript动态添加 -->
                </div>
                <div class="flex justify-end space-x-4">
                    <button class="px-4 py-2 border rounded-lg hover:bg-gray-100" onclick="closeUserSelectModal()">取消</button>
                    <button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700" onclick="confirmUserSelect()">确认</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 页面加载时初始化
        document.addEventListener('DOMContentLoaded', function() {
            loadProcesses();
        });

        // 加载流程数据
        function loadProcesses() {
            // 这里应该调用后端API获取数据
            // 模拟数据
            const mockData = [
                {
                    processCode: 'PR-2024-001',
                    title: '新能源电池组物料分析',
                    businessType: '底价',
                    projectCode: 'PJ-2024-001',
                    projectName: '新能源电池项目',
                    expectedDemandTime: '2024-06-01',
                    applicant: '张三',
                    applicationDate: '2024-03-15',
                    status: '处理中',
                    bidType: '分项决标',
                    materialCount: 15,
                    remark: '手动创建的物料分析流程'
                },
                {
                    processCode: 'PR-2024-002',
                    title: '商用车新能源动力系统开发',
                    businessType: '单一资源',
                    projectCode: 'PJ-2024-002',
                    projectName: '商用车新能源动力系统',
                    expectedDemandTime: '2024-09-01',
                    applicant: '李四',
                    applicationDate: '2024-03-16',
                    status: '待核价审核',
                    bidType: '总价决标',
                    materialCount: 25,
                    remark: '来自OA流程的商用车新产品开发申请单'
                }
            ];

            // 更新表格
            updateTable(mockData);
            
            // 更新分页信息
            updatePagination();
        }

        // 更新表格
        function updateTable(data) {
            const tbody = document.getElementById('processTableBody');
            tbody.innerHTML = '';
            
            data.forEach(item => {
                const tr = document.createElement('tr');
                tr.className = 'hover:bg-gray-50';
                tr.innerHTML = `
                    <td class="px-6 py-4 whitespace-nowrap">
                        <input type="checkbox" class="process-checkbox rounded text-blue-600">
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                        <a href="process-detail.html?code=${item.processCode}" class="text-blue-600 hover:text-blue-800">${item.processCode}</a>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${item.title}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${item.businessType}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${item.projectCode}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${item.projectName}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${item.expectedDemandTime}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${item.applicant}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${item.applicationDate}</td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span class="status-badge ${getStatusClass(item.status)}">${item.status}</span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${item.bidType}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${item.materialCount}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${item.remark}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                        <div class="flex space-x-2">
                            <button class="text-blue-600 hover:text-blue-800" onclick="viewProcess('${item.processCode}')">
                                <i class="fas fa-eye"></i>
                            </button>
                            <button class="text-green-600 hover:text-green-800" onclick="approveProcess('${item.processCode}')">
                                <i class="fas fa-check"></i>
                            </button>
                            <button class="text-yellow-600 hover:text-yellow-800" onclick="rejectProcess('${item.processCode}')">
                                <i class="fas fa-times"></i>
                            </button>
                            <button class="text-red-600 hover:text-red-800" onclick="deleteProcess('${item.processCode}')">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                    </td>
                `;
                tbody.appendChild(tr);
            });
        }

        // 获取状态样式类
        function getStatusClass(status) {
            switch (status) {
                case '待分派':
                    return 'pending';
                case '处理中':
                    return 'processing';
                case '已完成':
                    return 'completed';
                case '已取消':
                    return 'cancelled';
                default:
                    return '';
            }
        }

        // 显示新增流程模态框
        function showAddProcessModal() {
            document.getElementById('addProcessModal').style.display = 'block';
        }

        // 关闭新增流程模态框
        function closeAddProcessModal() {
            document.getElementById('addProcessModal').style.display = 'none';
            document.getElementById('addProcessForm').reset();
        }

        // 显示用户选择模态框
        function showUserSelectModal() {
            document.getElementById('userSelectModal').style.display = 'block';
        }

        // 关闭用户选择模态框
        function closeUserSelectModal() {
            document.getElementById('userSelectModal').style.display = 'none';
        }

        // 搜索用户
        function searchUsers() {
            const searchText = document.getElementById('userSearch').value;
            if (!searchText) {
                alert('请输入搜索内容');
                return;
            }

            // 这里应该调用后端API搜索用户
            // 模拟数据
            const mockResults = [
                {
                    id: '1001',
                    name: '张三',
                    gender: '男',
                    email: 'zhangsan@example.com',
                    phone: '13800138000',
                    role: '工程师',
                    department: '研发部'
                },
                {
                    id: '1002',
                    name: '李四',
                    gender: '男',
                    email: 'lisi@example.com',
                    phone: '13800138001',
                    role: '工程师',
                    department: '研发部'
                }
            ];

            const resultsDiv = document.getElementById('userSearchResults');
            resultsDiv.innerHTML = '';

            mockResults.forEach(user => {
                const div = document.createElement('div');
                div.className = 'p-2 hover:bg-gray-100 cursor-pointer';
                div.innerHTML = `
                    <div class="font-medium">${user.name} (${user.id})</div>
                    <div class="text-sm text-gray-500">${user.department} - ${user.role}</div>
                `;
                div.onclick = () => selectUser(user);
                resultsDiv.appendChild(div);
            });
        }

        // 选择用户
        function selectUser(user) {
            document.querySelector('input[name="applicant"]').value = `${user.name} (${user.id})`;
            closeUserSelectModal();
        }

        // 查看流程详情
        function viewProcess(processCode) {
            window.location.href = `process-detail.html?code=${processCode}`;
        }

        // 删除流程
        function deleteProcess(processCode) {
            if (confirm('确定要删除这个流程吗？此操作不可恢复。')) {
                // 这里应该调用后端API删除流程
                alert('流程已删除');
                loadProcesses();
            }
        }

        // 表单提交处理
        document.getElementById('addProcessForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            // 这里应该调用后端API保存流程
            alert('流程创建成功');
            closeAddProcessModal();
            loadProcesses();
        });

        // 查询表单提交处理
        document.getElementById('searchForm').addEventListener('submit', function(e) {
            e.preventDefault();
            const formData = new FormData(this);
            const searchParams = {};
            formData.forEach((value, key) => {
                if (value) searchParams[key] = value;
            });
            
            // 这里应该调用后端API查询流程
            loadProcesses();
        });

        // 重置查询
        function resetSearch() {
            document.getElementById('searchForm').reset();
            loadProcesses();
        }

        // 分页相关功能
        let currentPage = 1;
        let pageSize = 10;
        let totalCount = 0;

        function updatePagination() {
            const totalPages = Math.ceil(totalCount / pageSize);
            
            // 更新页码显示
            const pageNumbers = document.getElementById('pageNumbers');
            pageNumbers.innerHTML = '';
            
            for (let i = 1; i <= totalPages; i++) {
                const button = document.createElement('button');
                button.className = `px-3 py-1 border rounded-lg ${i === currentPage ? 'bg-blue-600 text-white' : 'hover:bg-gray-100'}`;
                button.textContent = i;
                button.onclick = () => goToPage(i);
                pageNumbers.appendChild(button);
            }
            
            // 更新记录数显示
            document.getElementById('totalCount').textContent = totalCount;
            document.getElementById('startIndex').textContent = (currentPage - 1) * pageSize + 1;
            document.getElementById('endIndex').textContent = Math.min(currentPage * pageSize, totalCount);
            
            // 更新上一页/下一页按钮状态
            document.getElementById('prevPage').disabled = currentPage === 1;
            document.getElementById('nextPage').disabled = currentPage === totalPages;
        }

        function goToPage(page) {
            currentPage = page;
            loadProcesses();
        }

        function previousPage() {
            if (currentPage > 1) {
                currentPage--;
                loadProcesses();
            }
        }

        function nextPage() {
            const totalPages = Math.ceil(totalCount / pageSize);
            if (currentPage < totalPages) {
                currentPage++;
                loadProcesses();
            }
        }

        // 审批流程
        function approveProcess(processCode) {
            if (confirm('确定要审批通过这个流程吗？')) {
                // 这里应该调用后端API审批流程
                alert('流程已审批通过');
                loadProcesses();
            }
        }

        // 驳回流程
        function rejectProcess(processCode) {
            const reason = prompt('请输入驳回原因：');
            if (reason) {
                // 这里应该调用后端API驳回流程
                alert('流程已驳回');
                loadProcesses();
            }
        }
    </script>
</body>
</html> 